<!-- 问卷人员弹窗 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      :destroyOnClose="true"
      :footer="null"
      title="筛选单位人员"
      centered
      :width="1000"
      v-model="visible"
      @cancel="handleCancel"
      :bodyStyle="{ paddingTop: '10px' }"
    >
      <div class="table-page-search">
        <a-form>
          <a-form-item label="姓名">
            <a-input v-model="queryParam.leadingName" placeholder="请输入姓名" allowClear />
          </a-form-item>
          <a-form-item label="手机号">
            <a-input v-model="queryParam.phoneNumber" placeholder="请输入手机号" allowClear />
          </a-form-item>
          <a-form-item label="会员单位">
            <a-input v-model="queryParam.memberName" placeholder="请输入会员单位" allowClear />
          </a-form-item>
          <a-form-item label="会员职务">
            <a-select v-model="queryParam.levelId" placeholder="请选择会员职务" allowClear class="width-15">
              <a-select-option v-for="item in downList.member_level_list" :value="item.id" :key="item.id"
                >{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="分组">
            <a-select v-model="queryParam.groupId" placeholder="请选择分组" allowClear class="width-15">
              <a-select-option v-for="item in downList.label_list" :value="item.id" :key="item.id"
                >{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item label="职务级别">
                <a-select v-model="queryParam.positionLevels" mode="multiple" placeholder="请选择职务级别"
                    allowClear style="width: 150px;">
                    <a-select-option v-for="item in downList.post_level_list" :value="item.dictValue">{{
                            item.dictLabel
                    }}
                    </a-select-option>
                </a-select>
            </a-form-item> -->
          <span class="search-submitButtons">
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </span>
        </a-form>
      </div>
      <div class="_pb-10 disFlxAC">
        已选择<a>{{ selectedRowKeys.length }}</a
        >人
        <span class="_pl-5 _pr-5">展示已选中名单</span>
        <a-switch v-model="onlyCheckedUser" @change="handleChangeSwitch" />
      </div>

      <s-table
        size="default"
        ref="table"
        rowKey="leadingId"
        :columns="columns"
        :data="loadData"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="levelId" slot-scope="text">
          {{ getLevelText(text) }}
        </span>
        <span slot="positionLevel" slot-scope="text">
          {{ text | getPostLevelText }}
        </span>
      </s-table>
      <template slot="footer">
        <a-button class="cancel" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { queryNotRegistration } from '@/api/system/system'
import { STable } from '@/components'
export default {
  components: {
    STable
  },
  data() {
    return {
      visible: false,
      queryParam: {
        // cocId: undefined,
        // keyword: undefined
        activityId: undefined,
        // memberId: undefined,
        // activityMemberId: undefined,
        // levelId: undefined,
        // phonenumber: undefined,
        // userName: undefined,
        // memberName: undefined,
        // groupId: undefined,
        // positionLevels: undefined,
        memberName: undefined,
        levelId: undefined,
        groupId: undefined,
        userName: undefined,
        phonenumber: undefined,
        positionLevels: undefined
        // leadingIds: []
      },
      columns: [
        { title: '昵称', dataIndex: 'userName' },
        { title: '姓名', dataIndex: 'leadingName' },
        { title: '会员单位', dataIndex: 'memberName' },
        { title: '会员职务', dataIndex: 'levelId', scopedSlots: { customRender: 'levelId' } },
        { title: '单位职务', dataIndex: 'companyPosition' },
        { title: '手机号', dataIndex: 'phonenumber' }
      ],
      loadData: async parameter => {
        return queryNotRegistration(Object.assign(parameter, this.queryParam))
      },
      selectedRowKeys: [],
      selectedRows: [],
      arr: [],
      onlyCheckedUser: false
    }
  },
  inject: ['drd'],
  computed: {
    downList() {
      return this.drd()
    }
  },
  watch: {},

  methods: {
    moduleShow(id, rows, per) {
      console.log('rows', per)
      // this.activityId = id
      // this.selectedRowKeys = (rows || []).map(item => item.leadingId)
      // this.selectedRows = rows || []
      // this.arr = rows || []
      // this.selectedRowKeys = rows || []
      this.queryParam.activityId = id
      this.visible = true
      console.log('this.selectedRowKeys---->', this.selectedRowKeys)
    },
    getLevelText(id) {
      let item = this.downList.member_level_list.find(f => f.id === id) || {}
      return item.name 
    },
    handleChangeSwitch(val) {
      console.log('val', val)
      this.queryParam.leadingIds = val ? this.selectedRowKeys : undefined
      this.$refs.table.refresh(true)
    },
    handleSearch() {
      this.$refs.table.refresh(true)
    },

    isLeadingId(leadingId) {
      var a = true
      this.arr.map(item => {
        if (leadingId == item.leadingId) {
          a = false
          return
        }
      })
      return a
    },
    isNoLeadingId(leadingId) {
      return this.selectedRowKeys.indexOf(leadingId)
    },
    //表格数据选中
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      selectedRows.map(items => {
        if (this.isLeadingId(items.leadingId)) {
          this.arr.push(items)
        }
      })
      this.arr = this.arr.filter(item => {
        if (this.isNoLeadingId(item.leadingId) > -1) {
          console.log('ress=', this.isNoLeadingId(item.leadingId))
          return item
        }
      })
    },
    handleReset() {
      Object.keys(this.queryParam).forEach(k => {
        if (k != 'activityId') this.queryParam[k] = undefined
      })
    },
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
      this.selectedRows = []
      this.onlyCheckedUser = false
      this.handleChangeSwitch()
    },
    handleConfirm() {
      this.$emit('confirmUser', this.arr)
      this.$emit('add')
      this.selectedRowKeys = []
      this.selectedRows = []
      this.visible = false
      this.onlyCheckedUser = false
      this.handleChangeSwitch()
    }
  },
  mounted() {}
}
</script>
<style scoped>
.cancel {
  margin-right: 10px;
}
</style>
